<template>
  <div class="order_box">
    <!-- <Loading v-show="LOADING"></Loading> -->
    <nav-com
      title="确认下单"
      :showView="showView"
      @back="backHandler()"
    ></nav-com>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <!-- 地址 -->
      <div
        class="group_add"
        style="min-height: 22.66vw; hieght: auto"
      >
        <div
          v-if="addressDetail == null"
          @click="edit"
          class="pay_add"
        >
          <img src="../../assets/add.png" />
          <p>添加收货地址</p>
        </div>
        <div
          v-else
          @click="edit"
          class="pay_add_success"
        >
          <img src="../../assets/add.png" />
          <div class="pay_add_right">
            <div style="display: flex">
              <p>{{ addressDetail.consignee }}</p>
              <span style="color: #999; margin-left: 2.6vw; padding-top: 0.5vw">{{ addressDetail.phone }}</span>
            </div>
            <div style="color: #999">
              {{ addressDetail.province_name }}{{ addressDetail.city_name
                }}{{ addressDetail.area_name }} {{ addressDetail.address }}
            </div>
          </div>
        </div>
      </div>

      <div
        class="group_add"
        style="height: auto"
      >
        <div
          class="pay_title"
          style="color:#808080"
        >商品信息：<span></span></div>
        <div class="pay_product">
          <img :src="details.image" />
          <div class="pay_pr_title">
            <div style="font-size:4.5vw; font-weight:700">{{ details.title }}</div>
            <div style="color:#ccc">数量：1</div>
            <div>￥{{ details.price }}</div>
          </div>
        </div>
        <div class="pay_content">
          <div class="content_border"></div>
          <div>
            <!-- <ul class="content_text">
                <li style="margin-top: 6vw; padding-bottom: 3vw">
                  <p>惊爆零售价</p>
                  <span>¥ {{ details.price }}</span>
                </li>
              </ul> -->
          </div>
        </div>
      </div>

      <div
        class="group_add"
        style="hieght: auto"
      >
        <div class="pay_title">支付方式</div>
        <ul class="pay_list">
          <li @click="paySel(7)" v-if="showPayType.pay_pri">
            <div class="pay_icon">
              <img src="../../assets/yiPay.png" />
              <p>钱包支付 <span style="font-size:12px;color:#999">当前余额</span><span style="font-size:14px;color:#FE4B20"> ￥{{ shareUser.price }}</span><span
                  style="background:#06ba03;color:#fff;padding:0.5vw 1.5vw;margin-left:2vw;border-radius:2px ;"
                  @click.stop="toRecharge"
                >充值</span></p>
            </div>
            <div class="pay_sel">
              <img
                v-if="selFlag == 7"
                :src="seled"
              />
              <img
                v-else
                :src="sel"
              />
            </div>
          </li>
          
          <li @click="paySel(20)" v-if="showPayType.pay_lp">
            <div class="pay_icon">
              <img src="@/assets/index/lingPay.png" />
              <p>零批余额支付</p>
            </div>
            <div class="pay_sel">
              <img v-if="selFlag == 20" :src="seled" />
              <img v-else :src="sel" />
            </div>
          </li>
          <li @click="paySel(30)" v-if="showPayType.pay_ad">
            <div class="pay_icon">
              <img src="@/assets/index/gg_pay.png" />
              <p>广告收益支付</p>
            </div>
            <div class="pay_sel">
              <img v-if="selFlag == 30" :src="seled" />
              <img v-else :src="sel" />
            </div>
          </li>
          <li @click="paySel(21)">
            <div class="pay_icon">
              <img src="../../assets/yiPay.png" />
              <p>互助消费金支付</p>
            </div>
            <div class="pay_sel">
              <img v-if="selFlag == 21" :src="seled" />
              <img v-else :src="sel" />
            </div>
          </li>
          <li @click="paySel(3)">
            <div class="pay_icon">
              <img src="@/assets/pay_juan.png" />
              <p>提货券兑换</p>
            </div>
            <div class="pay_sel">
              <img
                v-if="selFlag == 3"
                :src="seled"
              />
              <img
                v-else
                :src="sel"
              />
            </div>
          </li>
          <li @click="paySel(8)">
            <div class="pay_icon">
              <img src="@/assets/index/daifu.png" />
              <p>找人代付</p>
            </div>
            <div class="pay_sel">
              <img
                v-if="selFlag == 8"
                :src="seled"
              />
              <img
                v-else
                :src="sel"
              />
            </div>
          </li>
        </ul>
      </div>
      <div
        v-if="payStatus"
        style="border-radius: 2.6vw;background: #fff;margin:2.6vw;padding:2.6vw;line-height:7vw"
      >
        <p>温馨提示：</p>
        <p style="">晚上21:00-早上09:00不能使用微信和支付宝支付</p>
        <p style="font-size:5vw">请您使用提货券购买！</p>
      </div>

      <div style="height: 40vw">&nbsp;</div>
    </van-pull-refresh>
    <div
      class="card3_bottom"
      v-if="selFlag!=3"
    >
      <div class="card3_display">
        <!-- <div>
          合计：<span style="color:#FE4B20" v-if="xfj">￥{{ Number(details.price-shareUser.mutual_money>0?details.price-shareUser.mutual_money:0).toFixed(2)}}</span>
          <span style="color:#FE4B20" v-else>￥{{ Number(details.price).toFixed(2) }}</span>
        </div> -->
        <div>
          合计：<span style="color:#FE4B20">￥{{ Number(details.price).toFixed(2) }}</span>
        </div>
        <van-button
          @click="pay()"
          loading-text="购买中..."
          class="card3_btn"
        >立即支付</van-button>
      </div>
    </div>
    <van-popup
      style="background: #F5F5F5;border-radius: 3.2vw 3.2vw 0px 0px;"
      v-model="show"
      position="bottom"
    >
      <div class="scroll">
        <div class="list">
          <div
            class="list_item"
            @click="choose(item)"
            v-for="(item) in arr"
            :key="item.id"
          >
            <div class="list_item_left">
              <span class="left_unit">¥</span>
              <span class="left_price">{{parseInt(item.library.money)}}</span>
            </div>
            <div class="list_item_right">
              <div class="right_left">
                <div class="right_left_title">{{item.library.name}}</div>
                <div class="right_left_time">有效期{{item.end_time}}</div>
              </div>
              <div class="right_right">
                <img
                  style="width: 5.3vw"
                  v-if="item.id!=checkedId"
                  :src="sel"
                />
                <img
                  style="width: 5.3vw"
                  v-else
                  :src="seled"
                />
              </div>
            </div>

          </div>
        </div>

      </div>
      <div class="bottom_btn">
        <div
          class="bottom_btn_left"
          @click="closed"
        >不使用核销提货券</div>
        <div
          class="bottom_btn_right"
          @click="use"
        >确定使用</div>
      </div>
    </van-popup>

    <!-- <van-popup
      style="background: #F5F5F5;border-radius: 10px;"
      v-model="splitShow "
      position="center"
    >
     <div class="splitPopup">
      <div class="tips">
        亲，由于第三方支付平台规则，本订单需要拆分两笔支付，谢谢配合
      </div>
      <div class="splitTypes">
        <div class="item">
          <div class="title">第一单</div>
          <div class="money">173元</div>
          <div class="btn">去支付</div>
        </div>
        <div class="item">
          <div class="title">第二单</div>
          <div class="money">173元</div>
          <div class="btn">去支付</div>
        </div>
      </div>
     </div>
    </van-popup> -->


        <!-- 支付密码 -->
        <van-popup closeable style="background: #F5F5F5;border-radius: 10px; top: 40%;" v-model="payPassWordShow" @close="closePayPassWordShow"
      position="center">
      <div class="payPassWord">
        <div class="title" style="text-align: center;font-size: 18px;line-height: 25px;">
          {{ payPassWordTitle }}
        </div>
        <div class="center">
          <div v-if="!payPassWordIs" style="font-size: 14px;display: flex;
          max-height: 20vh;
          margin: 7vh 10vw;
          text-align: center;">
            {{ payPassWordCenter }}
          </div>
          <div style="display: flex;flex-direction: column;text-align: center;padding-top: 15px;" v-if="payPassWordIs">
            <div style="font-size: 14px;color: #333333;line-height: 30px;">待付款</div>
            <div style="font-size: 22px;color: #00BA27;line-height: 25px;">{{ details.price }}</div>
            <div style="font-size: 14px;color: #FF3333;min-height: 25px;margin: 10px 0 5px 0;">
            <span>{{payPassWordInfo}}</span>
            </div>
            <div>
              <!-- 密码输入框 -->
              <van-password-input length="4" :value="payPassWord" :focused="showKeyboard"   @focus="showKeyboard = true" />

            </div>
            <div style="font-size: 16px;color: #3362FF;line-height: 15px;" v-if="payPassWordInfo != ''" @click="toSetPayPassword()">忘记密码？</div>
          </div>
        </div>
        <div class="btns" v-if="!payPassWordIs" style="display: flex;justify-content: space-evenly;">
          <div style="width: 35vw;
            padding: 10px 0;
            text-align: center;
            border: 1px solid #D7D7D7;
            border-radius: 5px;
            color: #000000;" @click="payPassWordShow = false">我知道了</div>
             <div   v-if="payPassWordInfo==''" style="width: 35vw;
            padding: 10px 0;
            background: #FE4B20;
            text-align: center;
            border-radius: 5px;
            color: #fff;" @click="toSetPayPassword()">设置支付密码</div>
            <div  v-if="payPassWordInfo!=''"  style="width: 35vw; 
            padding: 10px 0;
            background: #FE4B20;
            text-align: center;
            border-radius: 5px;
            color: #fff;" @click="toSetPayPassword()">忘记密码</div>
        </div>
      </div>
    </van-popup>

    <!-- 数字键盘 -->
    <van-number-keyboard v-model="payPassWord"   :maxlength="4" @hide="onBlurEvent" @input="onPayPassWordInput" :show="showKeyboard"  /> <!-- 数字键盘 -->
    <!-- 支付密码 -->
  </div>
</template>
  <script>
import sel from "../../assets/sel.png";
import seled from "../../assets/seled.png";
import {
  getItems,
  getItems2,
  getAdressManagesAPI,
  getAdressManagesAPI2,
  postWxAppPay,
  postAlipay,
  createOrder,
  postAlipay2,
  myCouponLists,
  couponWriteoff,
  moneyAndScroePay,
  getYiPayStatu,
  paySend,
} from "@/api/api";
import { codeLists, writeoff } from "../../api/myExaminatonGaper";
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import { Toast } from "vant";
import payMixin from "./mixin/payMoxin";
import goBackEntity from "@/utils/eventBus.js";

export default {
  name: "pay",
  components: {
    navCom,
    Loading,
  },
  mixins: [payMixin],
  data() {
    return {

      payPassWordShow: false,//支付密码
      payPassWordConfirm:false,
      payPassWordTitle: "输入支付密码",
      payPassWordCenter: "您还未设置支付密码，请先设置您的支付密码",
      payPassWordInfo:"",
      showKeyboard: false,
      payPassWord: "",
      payPassWordIs:false,//支付密码

      xfj:false,
      id: "",
      splitShow: false,
      showView: true,
      details: {},
      selFlag: 0,
      sel: sel,
      seled: seled,
      checkedId: 0,
      show: false,
      checked: false,
      loadingFlag: false,
      addressDetail: null,
      uid: weixin.getUserId(),
      addressId: null,
      itemid: null,
      borderColor: "1px solid #F7541C",
      backgroundColor: "#FFF7F0",
      tab: 1,
      isLoading: false,
      LOADING: false,
      arr: [],
      order_sn: "",
      one_day: 0,
      has_order: false,
    };
  },

  async mounted() {
    this.orderInit();

    //获取支付状态
    this.getPayPassWord()
  },
  async created() {
    this.has_order = this.$route.params["has_order"] || false;
    this.order_sn = this.$route.params["order_sn"] || "";
  },
  // beforeDestroy(){
  //   goBackEntity.$off('id')
  // },
  methods: {
    useXiaofeijin(){
      if(this.selFlag != 20){
        this.xfj = false
        return
      }
      this.xfj = !this.xfj
    },
    choose(val) {
      this.arr.map((ele) => (ele.check = false));
      val.check = true;
      this.checkedId = val.id;
      this.arr = this.arr;
      console.log(val, "val");
    },
    closed() {
      this.checkedId = 0
      this.show = false;
      this.arr = this.arr.map((ele) => ({ ...ele, check: false }));
      this.selFlag = 1;
    },
    // use() {
    //   if (this.arr.some((ele) => ele.check)) {
    //     this.show = false;
    //     this.selFlag = 3;
    //   } else {
    //     this.$dialog.alert({
    //       message: "未选择",
    //     });
    //   }
    // },
    async getList() {
      myCouponLists({
        status: 1,
        offset: 1,
        limit: 20,
        goods_id: this.id,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 1) {
          // const arr = res.data.data.filter(
          //   (ele) => +ele.library.money >= +this.details.price
          // );
          this.arr = res.data.data;
          console.log(this.arr);
        }
      });
    },
    //返回
    backHandler() {
      this.$router.go(-1);
      // this.$router.push({ name: "add", params:this.$route.params });
      // console.log(this.fromPath);
      // this.$router.push({ name: "odersDetails", params: this.$route.params });
    },
    onRefresh() {
      this.orderInit();
      this.isLoading = false;
    },
    //微信初始化
    orderInit() {
      this.id = this.$route.params.id;
      this.order_sn = this.$route.params.order_sn;
      // getItems({id:this.id}).then(res=>{
      //     this.details = res.data.data
      // });

      getItems2({ id: this.id }).then((res) => {
        this.details = res.data.data;
        this.one_day = res.data.data.one_day;
        this.getList();
      });
      this.init();
    },

    // 创建订单
    creatOrderWeixinAli() {
      const that = this;
      createOrder({
        from: "goods",
        address_id: this.addressDetail.id,
        coupons_id: 0,
        order_type: "goods",
        buy_type: "alone",
        groupon_id: 0,
        one_day: this.one_day,
        goods_list: [
          {
            goods_id: this.details.id,
            goods_num: 1,
            sku_price_id: this.details.sku_price[0].id,
            goods_price: this.details.price,
            goods_type: "2",
            activity_type: "",
            dispatch_type: "express",
          },
        ],
      }).then((res) => {
        this.LOADING = false;
        console.log(res);
        if (res.data.code == 1) {
          that.order_sn = res.data.data.order_sn;
        } else {
          this.LOADING = false;
          this.$dialog
            .alert({
              message: res.data.msg,
            })
            .then((result) => {
              this.$router.push({ name: "orders", params: { typeNum: 0 } });
            })
            .catch((err) => {});
        }
      });
    },
    //支付

    // 现金和积分支付
    creatOrders(buy_type) {
      moneyAndScroePay({
        pay_type: buy_type,
        goods_id: this.details.id,
        total_price: this.details.price,
        address_id: this.addressDetail.id,
      }).then((res) => {
        this.LOADING = false;
        console.log(res);
        // this.order_sn = res.data.data.order_sn;
        if (res.data.code == 1) {
          Toast("购买成功");
          setTimeout(() => {
            this.backHandler();
          }, 1000);
        } else {
          this.LOADING = false;
          this.$dialog.alert({
            message: res.data.msg,
          });
        }
      });
    },
    toQrCodePay() {
      this.$dialog
        .alert({
          title: "支付方式",
          message:
            "亲，点击确定支付后-->截图保存支付码-->打开微信扫一扫-->识别扫码并支付，完成订单，半小时内有效。",
          confirmButtonText: "确定支付",
          // showCancelButton: true,
          // cancelButtonText: "取消",
        })
        .then(() => {
          this.$router.push({
            name: "qrCodePay",
            params: { order_sn: this.order_sn },
          });
          // paySend({ order_sn: this.order_sn }).then((res) => {
          //   if (res.data.code == 1) {
          //     this.$router.push({
          //       name: "qrCodePay",
          //       params: { order_sn: this.order_sn },
          //     });
          //     // this.$router.push({
          //     //   name: "orders",
          //     //   params: { order_sn: this.order_sn },
          //     // });
          //     // var host=window.location.protocol+"//"+window.location.host+'/#/qrCodePay/'+this.order_sn;
          //     // window.JS_TROOPS.download(host)
          //   } else {
          //     Toast(res.data.msg);
          //   }
          // });
        })
        .catch((err) => {});
    },
    //选择
  },
};
</script>

<style scoped>
    /deep/ .van-password-input__security {
      justify-content: space-around;
    }

    /deep/ .van-password-input__security li {
      max-width: 36px !important;
      max-height: 36px !important;
      background-color: #EFEFEF;
    }

    /deep/ .van-password-input__info {
      color: #333333;
      font-size: 14px;
    }

    /deep/ .van-hairline--surround::after {
      border-width: 1px;
      border: 0 solid transparent;
    }

    /deep/ .van-number-keyboard {
      z-index: 10000;
    }
    .payPassWord {
      width: 80vw;
      padding: 20px 10px;
    }

</style>



  <style scoped>
/* 共用 */
p {
  margin: 0;
  padding: 0;
}
html,
body,
#app,
.order_box {
  height: 100%;
  overflow: hidden;
}
.order_box {
  background: #f2f2f2;
  height: auto;
  min-height: 100vh;
}
.group_add {
  width: 94.66vw;
  margin-top: 2.6vw;
  margin-left: 2.6vw;
  border-radius: 2.6vw;
  background: #fff;
}
.card3_bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18.66vw;
  background: #fff;
  height: 18.66vw;
}
.card3_display {
  margin: 3.3vw;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card3_bottom .card3_btn {
  width: 54.66vw;
  height: 12vw;
  line-height: 12vw;
  font-size: 4vw;
  background: #d62f34;
  border-radius: 6vw;
  text-align: center;
  color: #fff;
}

.pay_add {
  padding-top: 8.4vw;
  display: flex;
}
.pay_add img {
  width: 4.53vw;
  height: 5.86vw;
  padding-left: 34vw;
}
.pay_add p {
  padding-left: 2.6vw;
  font-size: 3.4vw;
  color: #333;
}
.pay_add_success {
  display: flex;
}
.pay_add_success img {
  width: 4.53vw;
  height: 5.86vw;
  padding-left: 2.6vw;
  padding-top: 8.4vw;
}
.pay_add_success .pay_add_right {
  font-size: 3.733vw;
  margin-left: 2.6vw;
  margin-top: 6.2vw;
}

/* 详情 */
.pay_title {
  margin-left: 3vw;
  padding-top: 2.6vw;
  font-size: 4vw;
}
.pay_product {
  display: flex;
  position: relative;
}
.pay_product img {
  width: 29.3vw;
  height: 29.3vw;
  margin: 2.6vw 2.6vw 0 2.6vw;
  border-radius: 2.6vw;
}
.pay_product .pay_pr_title {
  font-size: 3.4vw;
  margin-right: 2.6vw;
  margin-top: 4.6vw;
}
.pay_product .pay_pr_title div {
  margin-bottom: 3vw;
}
.pay_product .pay_pr_title div:last-child {
  margin-bottom: 0vw;
  color: #fe4b20;
  font-size: 7vw;
}
.pay_product .pay_pr_title >>> p {
  color: #999;
  font-size: 3.4vw;
  height: 5vw;
  margin: 0;
  padding: 0;
}
.cont_color_title {
  margin-left: 3vw;
  padding-top: 2.6vw;
  font-size: 4vw;
}
.cont_color_list {
  display: flex;
  justify-content: space-around;
  margin: 3vw;
  padding-bottom: 5vw;
}
.cont_color_list li {
  display: flex;
  width: auto;
  border: 1px solid #f6f6f6;
  border-radius: 1.3vw;
}
.cont_color_list li img {
  width: 6.667vw;
  height: 6.667vw;
  margin: 1.3vw;
}
.cont_color_list li p {
  font-size: 3.2vw;
  line-height: 6.667vw;
  margin-top: 1.3vw;
  margin-right: 1.3vw;
}

/* 办理方式 */
.content_border {
  border-top: 1px solid #e1e1e1;
  margin: 2.6vw;
}
.pay_content .content_text li {
  display: flex;
  justify-content: space-between;
}
.pay_content .content_text li p {
  font-size: 3.2vw;
  color: #999;
  height: 6vw;
  line-height: 6vw;
  margin-left: 2.6vw;
}
.pay_content .content_text li span {
  font-size: 4vw;
  color: #d62f34;
  height: 6vw;
  line-height: 6vw;
  margin-right: 2.6vw;
}

/*支付方式*/
.pay_list {
  margin-top: 4vw;
}
.pay_list li {
  display: flex;
  justify-content: space-between;
}
.pay_icon {
  display: flex;
  height: 12vw;
}
.pay_icon img {
  width: 5.3vw;
  height: 5.3vw;
  margin-left: 2.6vw;
}
.pay_icon p {
  padding-left: 2.6vw;
}
.pay_sel img {
  width: 4vw;
  height: 4vw;
  margin-right: 2.6vw;
}
.bottom_btn {
  display: flex;
  /*width: 374px;*/
  height: 16vw;
  text-align: center;
  line-height: 16vw;
  font-size: 4.5vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  background: #f86831;
}
.bottom_btn_left {
  width: 50vw;
  background: #c1c1c1;
}
.bottom_btn_right {
  flex: 1;
}
.list {
  width: 93.6vw;
  margin: 0 auto;
  /* padding-top: 8vw; */
}
.list_item {
  background: url("~@/assets/pay_quan_bg.png");
  background-size: cover;
  width: 93.6vw;
  box-sizing: border-box;
  display: flex;
  height: 21vw;
  padding-right: 3.2vw;
  margin-bottom: 4vw;
}
.list_item_left {
  width: 29.3vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list_item_right {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*justify-content: center;!**!*/
}
.right_left {
  padding-left: 3.2vw;
}
.right_left_title {
  font-size: 4.53vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}
.right_left_time {
  margin-top: 3.2vw;
  font-size: 3.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #a1a1a1;
}
.left_unit {
  color: #fff;
  font-size: 4.5vw;
}
.left_price {
  color: #fff;
  font-size: 6.4vw;
}
.scroll {
  max-height: 300px;
  overflow-x: hidden;
}
.van-popup--bottom {
  padding-top: 20px !important;
}
.splitPopup {
  width: 327px;
  height: 230px;
  padding: 15px;
  background-image: url(../../assets/cdbg.png);
  background-repeat: round;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}
.tips {
  width: 233px;
  height: 44px;
  font-size: 13px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #8b2100;
  line-height: 22px;
  padding-left: 5px;
}
.splitTypes {
  display: flex;
  margin-top: 5vh;
  justify-content: space-around;
  align-items: center;
  height: 200px;
}
.splitTypes .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.splitTypes .item .title {
  width: 39px;
  height: 18px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aa6c54;
  line-height: 18px;
}
.splitTypes .item .money {
  height: 60px;
  font-size: 27px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 60px;
}
.splitTypes .item .btn {
  width: 99px;
  height: 29px;
  line-height: 29px;
  background: linear-gradient(180deg, #e48e5c 0%, #c4552f 100%);
  border-radius: 15px;
  text-align: center;
  color: white;
}
.splitTypes .item .zfzbtn {
  width: 99px;
  height: 29px;
  border-radius: 15px;
  border: 1px solid #d26e43;
  color: #d26e43;
  line-height: 29px;
}
.splitTypes .item .yzfbtn {
  width: 99px;
  height: 29px;
  border-radius: 15px;
  border: 1px solid #d1d2d5;
  color: #666666;
  line-height: 29px;
}
</style>
